﻿
@{
    Layout = null;
}

<html>
<head>
    <meta charset="utf-8">
    <title>商城装修</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script src="~/scripts/jquery-1.10.2.js"></script>
    <script src="~/scripts/Common/Base.js"></script>
    <script src="~/scripts/Common/RequestManager.js"></script>
    <script src="~/scripts/Common/ToolManager.js"></script>
    <script src="~/scripts/Common/CommentSet.js"></script>
    <script src="~/scripts/layer/layer.js"></script>
    <script src="~/layui/layui.js"></script>
    <link href="~/layui/css/layui.css" rel="stylesheet" />
    <link href="~/Content/admin.css" rel="stylesheet" />

    <link href="~/Content/h5/lib/weui.min.css" rel="stylesheet" />
    <link href="~/Content/h5/css/jquery-weui.css" rel="stylesheet" />
    <link href="~/Content/h5/css/style.css" rel="stylesheet" />
    <link href="~/Content/h5/css/icon.css" rel="stylesheet" />
    <link href="~/Content/h5/css/index.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script src="~/scripts/drag/Sortable.js"></script>

    <script src="~/scripts/Decorate/Decorate.js"></script>
    <style>
        .box {
            width: 359px;
            height: 577px;
            background: black;
            position: relative;
            margin-top: 10px;
            border-radius: 30px;
        }

            .box .top {
                width: 100%;
                height: 50px;
                border-radius: 30px 30px 0 0;
            }

            .box .center {
                width: 97%;
                height: 477px;
                background-color: #ffffff;
                margin-left: 1.5%;
            }

            .box .bottom {
                width: 100%;
                height: 45px;
                border-radius: 0 0 30px 30px;
            }

            .box .top .r {
                width: 8px;
                height: 8px;
                background: white;
                position: absolute;
                left: 50%;
                margin-left: -4px;
                border-radius: 100%;
                top: 5px;
            }

            .box .top .l {
                width: 10px;
                height: 10px;
                background: white;
                position: absolute;
                border-radius: 100%;
                left: 30%;
                top: 20px;
            }

            .box .top .ri {
                width: 60px;
                height: 6px;
                background: white;
                position: absolute;
                border-radius: 20%;
                left: 50%;
                top: 22px;
                margin-left: -30px;
            }

            .box .bottom .tome {
                width: 30px;
                height: 30px;
                position: absolute;
                left: 50%;
                margin-left: -15px;
                background: white;
                box-shadow: 0 0 2px 2px #C9C9C9;
                border-radius: 100%;
                bottom: 10px;
            }

        .commentItem {
            width: 40%;
            margin: 2%;
        }
    </style>

</head>
<body layadmin-themealias="default" style="height: auto;">

    <div class="layui-fluid">
        <div class="layui-row layui-col-space18">
            <div class="layui-col-md18">
                <div class="layui-row layui-col-space18">
                    <div class="layui-col-md4">
                        <div class="layui-card">

                            <div class="layui-card-header">基本组件</div>
                            <hr>
                            <div class="layui-card-body" id="foo">

                                <button type="button" class="layui-btn layui-btn-primary commentItem" comment-name="promise">
                                    <i class="layui-icon">&#xe7ae;</i> 承诺
                                </button>

                                <button type="button" class="layui-btn layui-btn-primary commentItem" comment-name="search">
                                    <i class="layui-icon">&#xe615;</i> 搜索
                                </button>
                                <button type="button" class="layui-btn layui-btn-primary commentItem" comment-name="keyword">
                                    <i class="layui-icon">&#xe609;</i> 搜索词
                                </button>
                                <button type="button" class="layui-btn layui-btn-primary commentItem" comment-name="banner">
                                    <i class="layui-icon">&#xe634;</i> 轮播
                                </button>

                                <button type="button" class="layui-btn layui-btn-primary commentItem" comment-name="menu">
                                    <i class="layui-icon">&#xe653;</i> 分类目录
                                </button>
                                <button type="button" class="layui-btn layui-btn-primary commentItem" comment-name="productSpecial">
                                    <i class="layui-icon">&#xe60d;</i> 商品专场
                                </button>
                                <button type="button" class="layui-btn layui-btn-primary commentItem" comment-name="productArea">
                                    <i class="layui-icon">&#xe64d;</i> 商品专区
                                </button>
                                <button type="button" class="layui-btn layui-btn-primary commentItem" comment-name="productHot">
                                    <i class="layui-icon">&#xe756;</i> 热门商品
                                </button>
                                <button type="button" class="layui-btn layui-btn-primary commentItem" comment-name="productCommand">
                                    <i class="layui-icon">&#xe663;</i> 推荐商品
                                </button>

                            </div>
                            <div class="layui-card-header">组合组件</div>
                            <div class="layui-card-body" id="compose_foo">

                                <button type="button" class="layui-btn layui-btn-primary commentItem" comment-name="head">
                                    <i class="layui-icon">&#xe656;</i> 顶部组合
                                </button>



                            </div>
                        </div>

                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-card">
                            <div class="layui-card-header">预览</div>

                            <div class="layui-card-body" style="height:620px;">
                                <div class="box">
                                    <div class="top">
                                        <div class="r"></div>
                                        <div class="l"></div>
                                        <div class="ri"></div>
                                    </div>
                                    <div class="center" style="white-space: nowrap;overflow-y:scroll;overflow-x:hidden;">
                                        <div class="layout bgcolor"
                                             style="background-color: #F8F8F8;line-height: 1.6;cursor:pointer;" id="render_layout">
                                            <div id="head_layout" style="height:2px;border: 1px dashed #3a3d43;">

                                            </div>


                                            <div class="body" style="border: 1px dashed #3a3d43;" id="bar">

                                            </div>

                                        </div>

                                    </div>
                                    <div class="bottom">
                                        <div class="tome"></div>
                                    </div>
                                </div>
                                <button type="button" id="btn_save" class="layui-btn layui-btn-fluid" style="width: 362px;">保存设置</button>

                            </div>
                        </div>

                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-card">
                            <div class="layui-card-header">组件属性</div>
                            <div class="layui-card-body">

                                <div class="layui-card">
                                    <div class="layui-card-body layui-text">
                                        <table class="layui-table">
                                            <colgroup>
                                                <col width="100">
                                                <col>
                                            </colgroup>
                                            <tbody id="property_body"></tbody>
                                        </table>
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>

                </div>
            </div>

        </div>
    </div>
    
</body>
</html>
<script src="~/scripts/swiper.js"></script>
<script>

</script>